<template>
    <div class="userList">
        <div class="banner">
            <div class="header"></div>
            <div class="user" v-for="(item,index) in userList" @click="onGeneralClick(items.link,{devId: items.devId,id:item.id,gatewayId:items.gatewayId})">
                <div class="left">
                    <img class="img" alt="right" src="../../assets/home_20.png">
                    <div class="name">{{ item.name||"用户" + item.id }}</div>
                </div>
                <div class="right">
                    <div>录入时间</div>
                    <div>{{items.createTime}}</div>
                </div>
            </div>
        </div>
        <div class="buttonList"><div class="plus" @click="onGeneralClick('/addUser',null)"></div></div>
    </div>
</template>

<script>
    import { post } from "../../js/utils";
    import { parse2001 } from "../../js/parseData";
    import moment from 'moment'

    export default {
        name: 'UserList',
        components: {},
        data () {
            return {
                gatewayId: this.$route.query.gatewayId,
                devId:this.$route.query.devId,
                userList:[],
                items: {},
            }
        },
        async created () {
           this.getUserList()
        },
        methods: {
            onGeneralClick: function (link, queryParams) {
                this.$router.push({
                    path: link,
                    query: queryParams
                });//其中login是你定义的一个路由模块
            },
            getUserList: async function (){
                let ret = await post("/user/listGateways")
                //1、合并设备id，得出设备列表
                /*let DevIds = Array.from(new Set(ret.deviceKvs.map((item) => {
                 return item.DevId
                 })));
                 //2、排序
                 DevIds.sort((a, b) => a - b);*/
                //change：设备只有一台，不会出现多台的情况
                let DevIds = [this.devId];
                //3、根据设备列表，合并设备列表的keyValue
                DevIds.map((devId)=>{
                    //3.1 自定义共同属性
                    let userDevAttributes  = { devId: devId,gatewayId:this.gatewayId,link:'/detailUser' };
                    //3.2 deviceKvs共同属性集合
                    ret.deviceKvs.map(({ DevId,Key,Value,Created},index_i)=>{
                        if(devId == DevId){ //若设备id一致，则合并KeyValue属性到列表中

                            //指令是01是用户列表，指令02是单个用户的详细信息...
                            if("01" == [Key] ){ //用户列表指令,将用户数据解析出用户列表
                                let userList = parse2001(Value).get("userList")
                                Object.assign(userDevAttributes,{ userList: userList})
                                this.userList = userList;

                            }else {
                                Object.assign(userDevAttributes,{ [Key]: Value })
                            }
                            Object.assign(userDevAttributes,{ "createTime": moment(Created).format('YYYY-MM-DD') })
                        }
                    })

                    //4、若有多版本属性，则进行覆盖
                    /*旧版：
                     ret.userDeviceKvs.map(({ DevId,Key,Value},index)=>{
                     if(item == DevId){ //若设备id一致，则合并KeyValue属性到列表中
                     Object.assign(userDevAttributes,{ [Key]: Value })
                     }
                     })
                     */
                    //4、若有多版本属性，则进行覆盖
                    ret.userDeviceKvs.map(({ DevId,Key,Value},index_j)=>{
                        if(devId == DevId){ //若设备id一致，则合并KeyValue属性到列表中
                            this.userList = this.userList.map((user,index_k)=>{
                                let {id} = user
                                if([Key] == "id_"+id){ //判断id是否存在重命名的可能,针对当前的id做替换
                                    return Object.assign(user,JSON.parse(Value))
                                }else{
                                    return user
                                }
                            })
                        }
                    })
                    this.items = userDevAttributes;//返回该设备的所有属性
                })
            }
        }
    }
</script>

<style scoped>
    .userList > .banner {
        width: 100vw;
        min-height: 50vh;
        background: url(../../assets/home_922.png) no-repeat center top;
        background-size: 100% 100%;
    }

    .userList > .banner > .header {
        min-height: 2vh;
    }

    .userList > .banner > .user {
        width: 90vw;
        min-height: 10vh;
        margin: 2vh auto;
        background: url(../../assets/userList_01.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
    }

    .userList > .banner > .user > .left {
        margin-left: 20px;
        height: 50px;
        align-self: center;
        display: flex;
        justify-content: space-between;
    }

    .userList > .banner > .user > .left > .img{
        width: 50px;
        height: 50px;
    }
    .userList > .banner > .user > .left > .name{
        align-self: center;
        font-size: 18px;
    }

    .userList > .banner > .user > .right {
        margin-right: 20px;
        align-self: center;
        font-size: 12px;
    }

    .userList > .buttonList {
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 20vh;
        bottom: 0px;
    }

    .userList > .buttonList > .plus {
        pointer-events: auto;
        background: url(../../assets/plus.png) no-repeat center center;
        background-size: 100% 100%;
        width: 100px;
        height: 100px;
    }
</style>
